<template>
  <div>
    <div>
      <SupInput
        :InpList="inpList"
        :BtnList="btnList"
        @clickFn="btnFn"
      ></SupInput>
      <Suptable
        :isTag="true"
        :TagName="TagName"
        :headerData="headerData"
        :tableData="tableData"
        :isPage="true"
        :border="true"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
        :current-page="pagenum"
        :pagesizeList="fenye"
        :pagesize="pagesize"
      >
        <template v-slot:tagSlot="{ row }">
          <div>
            <el-switch
              v-model="row.row.status"
              active-text="可用"
              @change="changState(row.row.status, row.row.id)"
              inactive-text="禁用"
            >
            </el-switch>
          </div>
        </template>
        <template v-slot:opera="{ row }">
          <div>
            <el-button @click="goEdit(row.row)" size="small">编辑</el-button>
            <el-button @click="godelete(row.row.id)" size="small"
              >删除</el-button
            >
          </div>
        </template>
      </Suptable>
      <div>
        <el-dialog
          :title="isEdit ? '编辑' : '新增'"
          :visible.sync="dialogVisible"
          width="30%"
        >
          <div>
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item label="原因类型" prop="name">
                <el-input v-model="ruleForm.name"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import {
  reasonList,
  detReason,
  addReason,
  queryReason,
  editReason,
  editReasonShow,
} from "@/api/reasonMock";
import Suptable from "@/components/Suptable";
import SupInput from "@/components/SupInput";
export default {
  name: "orderReason",
  data() {
    return {
      TagName: "是否可用",
      pagenum: 1,
      pagesize: 10,
      total: 0,
      fenye: [5, 10, 15, 20],
      dialogVisible: false,
      isEdit: false,
      tableData: [],
      editId: "",
      headerData: [
        {
          prop: "id",
          label: "编号",
        },
        {
          prop: "name",
          label: "原因类型",
        },
        // {
        //   prop: "sort",
        //   label: "排序",
        // },
        {
          prop: "createTime",
          label: "添加时间",
        },
      ],
      ruleForm: {
        name: "",
        id: "",
        sort: "",
        createTime: "",
        date1: "",
        date2: "",
      },
      rules: {
        id: [{ required: true, message: "请输入编号", trigger: "blur" }],
        name: [
          { required: true, message: "请选择退款原因", trigger: "change" },
        ],
      },
      inpList: [
        {
          text: "请输入退款原因",
          model: "",
        },
      ],
      btnList: [
        {
          icon: "el-icon-search",
          name: "查找",
        },
        {
          icon: "el-icon-edit",
          name: "添加",
        },
      ],
    };
  },
  mounted() {
    let _self = this;
    _self.orderReasonList();
  },
  methods: {
    changState(status, id) {
      let _self = this;
      status = status ? 0 : 1;
      let data = { status, id };
      editReasonShow(data).then((res) => {
        // console.log(res);
        if (res.meta.status == 200) {
          _self.$message(res.meta.msg);
        }
      });
    },
    goEdit(row) {
      let _self = this;
      _self.isEdit = true;
      _self.dialogVisible = true;
      _self.ruleForm.name = row.name;
    },
    godelete(id) {
      let _self = this;
      _self
        .$confirm("确定删除吗", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          let data = { id };
          detReason(data).then((res) => {
            // console.log(res);
            if (res.meta.status == 200) {
              _self.$message({
                type: "success",
                message: "删除成功",
              });
              _self.orderReasonList();
            } else {
              _self.$message({
                type: "info",
                message: "res.meta.msg",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    submitForm(formName) {
      let _self = this;
      _self.$refs[formName].validate((valid) => {
        if (valid) {
          if (!_self.isEdit) {
            let { id, name, sort, createTime } = _self.ruleForm;
            let data = {
              id,
              name,
              sort,
              createTime,
            };
            addReason(data).then((res) => {
              // console.log(res);
              if (res.meta.status == 200) {
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
                _self.orderReasonList();
              } else {
                _self.$message(res.meta.msg);
              }
            });
          } else {
            let data = {
              id: _self.editId,
              name: _self.ruleForm.name,
              sort: _self.ruleForm.sort,
              createTime: _self.ruleForm.createTime,
            };
            editReason(data).then((res) => {
              // console.log(res);
              if (res.meta.status == 200) {
                _self.orderReasonList();
                _self.$message("更改成功");
                _self.dialogVisible = false;
                _self.$refs[formName].resetFields();
              }
            });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    orderReasonList() {
      let _self = this;
      let data = {
        pagenum: _self.pagenum,
        pagesize: _self.pagesize,
      };
      reasonList(data).then((res) => {
        console.log(res);
        let _self = this;
        _self.tableData = [];
        for (let item of res.data.user) {
          let reasonData = {
            id: item.id,
            name: item.name,
            sort: item.sort,
            createTime: item.createTime,
            status: item.status == 0 ? true : false,
          };
          _self.tableData.push(reasonData);
        }
        _self.total = res.data.total;
        _self.pagenum = res.data.pagenum;
      });
    },
    btnFn(index) {
      let _self = this;
      if (index == 0) {
        let data = {
          name: _self.inpList[0].model,
        };
        queryReason(data).then((res) => {
          // console.log(res);
          _self.tableData = [];
          if (res.meta.status == 200) {
            for (let item of res.data.arr) {
              let reasonData = {
                id: item.id,
                name: item.name,
                sort: item.sort,
                createTime: item.createTime,
                status: item.status == 0 ? true : false,
              };
              _self.tableData.push(reasonData);
              _self.pagesize = res.data.pagesize;
              _self.total = res.data.total;
            }
          } else {
            _self.pagesize = 10;
            _self.orderReasonList();
          }
        });
      } else if (index == 1) {
        let _self = this;
        _self.isEdit = false;
        _self.dialogVisible = true;
        _self.ruleForm = {
          id: "",
          name: "",
          sort: "",
          createTime: "",
        };
      }
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      let _self = this;
      _self.pagesize = val;
      _self.userList();
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      let _self = this;
      _self.pagenum = val;
      _self.userList();
    },
  },
  components: { Suptable, SupInput },
};
</script>
<style scoped>
.search1 {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
.shuju {
  padding: 20px;
  margin: 20px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
}
</style>